<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <CommonAside />
      </el-aside>

      <el-container>
        <el-header>
          <CommonHeader />
        </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import { defineComponent, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  components: { CommonAside, CommonHeader },
  setup() {
    const tableData = ref([
      {
        date: "2024-3-35",
        title: "test1",
        message: "Message1",
      },
      {
        date: "2024-3-35",
        title: "test2",
        message: "Message2",
      },
      {
        date: "2024-3-35",
        title: "test3",
        message: "Message3",
      },
    ]);
    const open = (row) => {
      ElMessageBox.alert(row.message, row.title, {
        confirmButtonText: "OK",
      });
    };
    return {
      tableData,
      open,
    };
  },
});
</script>

<style scoped>
.el-header {
  padding: 0;
}
</style>
